<template>
    <div>
        <header class="title" @click="toggle">
            <h4>{{ title }}</h4>
        </header>
        <div class="content" v-show="isShow">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
        },
        name: {
            type: [String, Number],
        },
    },
    data() {
        return {};
    },
    methods: {
        toggle() {
            // 触发this.collapse中的item-click事件，参数为this，即当前的CollapseItem实例
            this.collapse.$emit("item-click", this);
        },
    },
    computed: {
        isShow() {
            // Collapse和CollapseItem之间可能还隔着其他组件，不能使用$parent这种方式判断
            // return this.$parent.value.indexOf(this.name) > -1;

            // console.log(this.collapse)
            return this.collapse.value.indexOf(this.name) > -1;
        },
    },
    inject: ["collapse"],
};
</script>

<style lang="less" scoped>
.title {
    cursor: pointer;
}
</style>